<template>
  <div>
    <!-- 工厂 -->
    <el-form-item prop='factoryDeptCode' v-if='showData.factory'>
      <el-select
        :multiple="multipleData.factory"
        :disabled="disabledData.factory"
        :placeholder="placeholderData.factory"
        :clearable="clearData.factory"
        :size="sizeData.factory"
        :style="{'width':widthData.factory}"
        v-model="queryParams.factoryDeptCode"
        @change="handleFactory"
      >
        <el-option
          v-for="item in factoryList"
          :key="item.factoryDeptCode"
          :label="item.factoryName"
          :value="item.factoryDeptCode"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <!-- 车间 -->
    <el-form-item prop='workshopCode' v-if='showData.workshop'>
      <el-select
        :multiple="multipleData.workshop"
        :disabled="disabledData.workshop"
        :placeholder="placeholderData.workshop"
        :clearable="clearData.workshop"
        :size="sizeData.workshop"
        :style="{'width':widthData.workshop}"
        v-model="queryParams.workshopCode"
        @change="handleWorkshop"
      >
        <el-option
          v-for="item in workshopList"
          :key="item.workshopCode"
          :label="item.workshopName"
          :value="item.workshopCode"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <!-- 产线-->
    <el-form-item prop='lineId' v-if='showData.line'>
      <el-select
        :multiple="multipleData.line"
        :disabled="disabledData.line"
        :placeholder="placeholderData.line"
        :clearable="clearData.line"
        :size="sizeData.line"
        :style="{'width':widthData.line}"
        v-model="queryParams.lineId"
        @change="handleProductionLine"
      >
        <el-option
          v-for="item in productionLineList"
          :key="item.lineId"
          :label="item.lineName"
          :value="item.lineId"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <!--工位 -->
    <el-form-item prop='workStationCode' v-if='showData.workStation'>
      <el-select
        :disabled="disabledData.workStation"
        :multiple="multipleData.workStation"
        :placeholder="placeholderData.workStation"
        :clearable="clearData.workStation"
        :size="sizeData.workStation"
        :style="{'width':widthData.workStation}"
        v-model="queryParams.workStationCode"
        @change="handleWorkStation"
      >
        <el-option
          v-for="item in workStationList"
          :key="item.workStationCode"
          :label="item.workStationName"
          :value="item.workStationCode"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>
<script>
import { mapState,mapActions,mapGetters } from "vuex";
export default {
  props: {
    multipleData: {
      type: Object,
      default: () => ({
        factory:false,
        workshop:false,
        line:false,
        workStation:false
      })
    },

    placeholderData: {
      type: Object,
      default: () => ({
        factory:"请选择工厂",
        workshop:"请选择车间",
        line:"请选择产线",
        workStation:"请选择工位"
      })
    },

    showData: {
      type: Object,
      default: () => {
        return {
          factory:true,
          workshop:true,
          line:true,
          workStation:false
        }
      }
    },

    disabledData:{
      type: Object,
      default: () => ({
        factory:false,
        workshop:false,
        line:false,
        workStation:false
      })
    },

    clearData: {
      type: Object,
      default: () => ({
        factory:false,
        workshop:false,
        line:false,
        workStation:false
      })
    },

    sizeData:{
      type: Object,
      default: () => ({
        factory:"small",
        workshop:"small",
        line:"small",
        workStation:"small",
      })
    },

    widthData:{
      type: Object,
      default: () => ({
        factory:"100%",
        workshop:"100%",
        line:"100%",
        workStation:"100%"
      })
    },

    //数据过滤方式：permit:用户权限过滤,custom:自定义规则过滤(需传过滤回调方法),none:无需过滤，取所有数据
    filterData: {
      type: Object,
      default: () => ({
        factory:"permit",
        workshop:"permit",
        line:"permit",
        workStation:"permit"
      })
    },

    //自定义规则过滤 回调
    functionData:{
      type: Object,
      default: () => ({
        factory:()=>{},
        workshop:()=>{},
        line:()=>{},
        workStation:()=>{}
      })
    },

    //工厂,车间,产线，工段信息
    arrData:{
      type:Object,
      default:()=>{}
    },
    size: {
      type: String,
      default: 'small'
    },
    isAllList:{
      type:Boolean,
      dafault:false
    }
  },

  data() {
    return {
      factoryList:[],
      workshopList:[],
      productionLineList:[],
      workStationList:[],   //工位
      queryParams:{
        factoryDeptCode: null,
        workshopCode: null,
        lineId: null,
        workStationCode:null
      },
      emitParams:{
        factoryDeptId: null,
        factoryDeptCode:null,
        factoryName: null,
        workshopId: null,
        workshopCode:null,
        workshopName: null,
        lineCode: null,
        lineId: null,
        lineName: null,
        workStationId: null,
        workStationCode: null,
        workStationName: null
      }
    };
  },

  computed: {
    ...mapGetters([
      'permitList',
      'allList'
    ])
  },

  methods: {
    getBaseData() {
      if(this.isAllList){
        this.factoryList = this.allList;
      }
      else{
        if(this.filterData.factory === "permit"){
          this.factoryList = this.permitList;
        }
      }
      if(this.factoryList?.length){
        if(this.queryParams?.factoryDeptCode){//当默认回填工厂信息时，自动获取车间数据
          this.handleFactory(this.queryParams.factoryDeptCode,"init")
        }
        if(this.queryParams?.workshopCode){//当默认回填车间信息,自动获取产线数据
          this.handleWorkshop(this.queryParams.workshopCode,"init")
        }
        if(this.queryParams?.lineId){//当默认回填产线信息,自动获取工位数据
          this.handleProductionLine(this.queryParams.lineId,"init")
        }
        if(this.queryParams?.workStationCode){//默认回填工位
          this.handleWorkStation(this.queryParams.workStationCode,"init")
        }
      }
    },

    //选择工厂,获取车间数据
    handleFactory(val,key){
      const factoryItem = this.factoryList.find(ele => ele.factoryDeptCode === val);
      this.workshopList = factoryItem?.workshopVos ? factoryItem?.workshopVos : [];
      this.emitParams.factoryDeptCode = val;
      this.emitParams.factoryDeptId = factoryItem?.factoryDeptId || null;
      this.emitParams.factoryName = factoryItem?.factoryName || null;
      if(key !== "init"){//改变下拉框数据
        this.queryParams.workshopCode = null;
        this.queryParams.lineId = null;
        this.queryParams.workStationCode = null;
        this.emitParams.workshopId = null;
        this.emitParams.workshopCode = null;
        this.emitParams.workshopName = null;
        this.emitParams.lineCode = null;
        this.emitParams.lineId = null;
        this.emitParams.lineName = null;
        this.emitParams.workStationId = null;
        this.emitParams.workStationCode = null;
        this.emitParams.workStationName = null;
        this.$emit("change",this.emitParams);
      }
    },

    //选择车间,获取产线数据
    handleWorkshop(val,key){
      const workshopItem = this.workshopList.find(ele => ele.workshopCode === val);
      this.productionLineList = workshopItem?.productionLineVos ? workshopItem?.productionLineVos : [];
      this.emitParams.workshopCode = val;
      this.emitParams.workshopId = workshopItem?.workshopId || null;
      this.emitParams.workshopName = workshopItem?.workshopName || null;
      if(key !== "init"){//改变下拉框数据
        this.queryParams.lineId = null;
        this.queryParams.workStationCode = null;
        this.emitParams.lineCode = null;
        this.emitParams.lineId = null;
        this.emitParams.lineCode = null;
        this.emitParams.lineName = null;
        this.emitParams.workStationId = null;
        this.emitParams.workStationCode = null;
        this.emitParams.workStationName = null;
        this.$emit("change",this.emitParams);
      }
    },

    //选择产线,获取工位数据
    handleProductionLine(val,key){
      const productionLineItem = this.productionLineList.find(ele => ele.lineId === val);
      this.workStationList = productionLineItem?.workStationVos || [];
      this.emitParams.lineId = val;
      this.emitParams.lineCode = productionLineItem?.lineCode || null;
      this.emitParams.lineName = productionLineItem?.lineName || null;
      if(key !== "init"){//改变下拉框数据
        this.queryParams.workStationCode = null;
        this.emitParams.workStationId = null;
        this.emitParams.workStationCode = null;
        this.emitParams.workStationName = null;
        this.$emit("change",this.emitParams);
      }
    },

    //选择工位
    handleWorkStation(val,key){
      const workStationItem = this.workStationList.find(ele => ele.workStationCode === val);
      this.emitParams.workStationCode = val;
      this.emitParams.workStationId = workStationItem?.workStationId || null;
      this.emitParams.workStationName = workStationItem?.workStationName || null;
      if(key !== "init"){
        this.$emit("change",this.emitParams);
      }
    }
  },

  watch:{
    arrData:{
      handler(newVal){
        if(newVal?.factoryDeptCode){
          // this.queryParams = Object.assign({},this.queryParams,newVal);
          this.queryParams = newVal;
        }else{
          this.queryParams= {
            factoryDeptCode: null,
            workshopCode: null,
            lineId: null,
            workStationCode:null
          };
          this.workshopList = [];
          this.productionLineList = [];
          this.workStationList = [];
        }
        this.getBaseData()
      },
      deep: true,
      immediate: true
    }
  },
};
</script>
<style lang="scss" scoped>
.org-select {
  width: 200px;
}
</style>
